<template>
    <div>
        <div class="login-header">
            <p class="lh-font">登录</p>
            <p>请使用您的bookstore账号</p>
        </div>
        <div>
            <p class="login-tips">{{logintips}}</p>
        </div>
        <div class="account-input">
            <div class="accinput"><input type="text" v-model="account" placeholder=" 仅支持使用BookStore账号 " @keyup="enter"></div>
            <div class="pwdinput"><input type="password" v-model="password" placeholder=" BookStore密码" @keyup="enter"></div>
        </div>
        <div class="turntoReg" @click="setlogin(false)">
            没有账号？
        </div>
        <div class="login-but">
            <input type="button" value="登录" @click="login()">
        </div>
    </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'

export default {
    name:'Login',
		data() {
			return {
				account: '',
				password: '',
			}
		},
    computed: {
        ...mapState('logreg',[
            'logintips',
        ])
    },
    watch: {
        account:function(){
        }
    },
    methods: {
		login() {
			this.axios.post('/user/login',{
				username: this.account,
				password: this.password
			})
			.then((response) => {
				if (response.status == 200 && response.data.code == 200){
					this.$messagebox.alert('登录成功','提示');
					// 设置用户登录状态
					this.setactive_user(this.account);
					// 持久化存储用户登录状态
					localStorage.setItem('user',this.account)
					// 购物车添加一个列表用于存储此用户的购物车记录
					this.add_user({username: this.account});
					// 清空输入框
					this.account = '';
					this.password = '';
					// 关闭登录界面
					this.showlogreg(false);
					// 跳转到首页
					this.$router.replace('/home');
					
				}else if(response.status == 200 && response.data.code == 400){
					this.$messagebox.alert('登录失败，用户名或密码错误','提示');
				}
			})
			.catch((err) => {
				console.log(err)
			})
		},
		enter(e) {
			if (e.keyCode == 13){
				this.login()
			}
		},
        ...mapMutations('logreg',[
            'setlogin',
			'setactive_user',
			'setlogintips',
			'showlogreg'
        ]),
		...mapMutations('cart',[
			'add_user'
		])
    }
}
</script>

<style>
div.login-header {
    margin-bottom: 15px;
}
p.lh-font {
    font-size: 35px;
    font-family: 'Google Sans','Noto Sans Myanmar UI',arial,sans-serif;
}
p.login-tips {
    font-size: 12px;
    color: red;
    padding-left: 100px;
    text-align: left;
}
div.account-input {
    width: 324px;
    height: 100%;
    position: relative;
    margin-left: 78px;
    margin-right: 78px;
    display: inline-block;
}
div.account-input>div {
    border: 1px solid #96a5b4;
    margin-bottom: 20px;
    border-radius: 5px;
}
div.account-input>div>input {
    width: 300px;
    height: 45px;
    left: 0px;
    font-family: Verdana,Tahoma,Arial;
    border: none;
}
div.account-input>div>input:focus {
    outline: none;
    border-bottom: rebeccapurple 0.1px solid;
}
div.login-but>input {
    cursor:pointer;
    font-size: 20px;
    font-weight: 500;
    font-family: inherit;
    color: white;
    width: 120px;
    height: 50px;
    outline: none;
    background-color: #6ba4e6;
    border: #6ba4e6;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    left: 100px;
    bottom: -20px;
}
div.turntoReg {
    display: inline-block;
    position: relative;
    left: -8em;
    bottom: -4em;
    font-size: 15px;
    color: gray;
    cursor:pointer

}
div.login-but>input:hover {
    width: 125.5px;
    height: 50.5px;
}

</style>